<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="static/styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="static/styles/common.css" />
    <link rel="stylesheet" type="text/css" href="static/styles/sign.css" />
    <script src="static/scripts/rem.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/scripts/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <title>签到</title>
    <style type="text/css">
    	.body{
    		background-color: #1853b8 ;
    	}
    </style>
</head>

<body>
    <div class="body" id="app">
        <div id="header" class="fixed blue">
        	<a href="javascript:history.go(-1);" class="header_back">
        		<img src="static/images/nav_back.png"/>
        	</a>
            <h1 class="title">签到</h1>
            <a href="leave_apply.html" class="header_btn_right"></a>
        </div>
        <div class="page_body">
        	<div class="qd_bg">
        		<img class="img-responsive" src="static/images/bqd_g01.png"/>
        		<div class="qd_mark">
        			<div class="qd_btn_circle">签到</div>
        			<div class="qd_btn" @click="showModal">快点我签到吧</div>
        		</div>
        		<div class="qd_bg_edge">
        			<img class="img-responsive"  src="static/images/qd_bg.png"/>
        		</div>
        		
        	</div>
            <div class="qd_person">
            	<div class="qd_person_body">
            		<div class="qd_fren">
            			<img src="static/images/qd_red.png"/>
            		</div>
	            	<ul>
	            		<li>
	            			<div class="user">
	            				<span class="avatar"><img src="static/images/image_touxiang.png"/></span>
	            				<span class="username">林更新</span>
	            				<img class="qdrank" src="static/images/qd_first.png"/>
	            			</div>
	            			<div class="point">
	            				总积分： 1726
	            			</div>
	            		</li>
	            		<li>
	            			<div class="user">
	            				<span class="avatar"><img src="static/images/image_touxiang.png"/></span>
	            				<span class="username">林更新</span>
	            				<img class="qdrank" src="static/images/qd_two.png"/>
	            			</div>
	            			<div class="point">
	            				总积分： 1726
	            			</div>
	            		</li>
	            		<li>
	            			<div class="user">
	            				<span class="avatar"><img src="static/images/image_touxiang.png"/></span>
	            				<span class="username">林更新</span>
	            				<img class="qdrank" src="static/images/qd_three.png"/>
	            			</div>
	            			<div class="point">
	            				总积分： 1726
	            			</div>
	            		</li>
	            		<li>
	            			<div class="user">
	            				<span class="avatar"><img src="static/images/image_touxiang.png"/></span>
	            				<span class="username">林更新</span>
	            			</div>
	            			<div class="point">
	            				总积分： 1726
	            			</div>
	            		</li>
	            	</ul>
            	</div>
            </div>
            
        </div>
        
        
        <div class="qd_modal" v-if="modalVisible">
        	<img class="qd_success_img" src="static/images/qiandaochenggong.png"/>
        	<div class="qd_modal_outside">
        		<div class="qd_modal_inside">
        			<p class="qd_success_tips">恭喜您今日签到成功！</p>
        			<p>+5分</p>
        		</div>
        	</div>
        </div>
        
        <div class="overlay" v-if="modalVisible"></div>
        
        
        
    </div>
	
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				modalVisible:false
			},
			methods:{
				showModal(){
					this.modalVisible = true;
				}
			}
		})
	</script>
</body>

</html>